<template>
  <Category :scene="scene" />
  <el-card style="margin-top: 15px">
    <div v-show="scene == 0">
      <el-button @click="addAttr" type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id ? false : true">添加属性</el-button>
      <el-table border :data="attrArr" height="500px" style="margin-top: 15px">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="属性名称" width="120px" prop="attrName"></el-table-column>
        <el-table-column label="属性值名称">
          <template #="{ row, $index }">
            <el-tag style="margin: 5px" v-for="(item, index) in row.attrValueList" :key="item.id">
              {{ item.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <!-- row：已有的属性对象 -->
          <template #="{ row, $index }">
            <!-- 修改已有属性的按钮 -->
            <el-button type="primary" size="small" icon="Edit" @click="updateAttr(row)"></el-button>
            <el-popconfirm :title="`你确定删除${row.attrName}?`" width="200px" @confirm="deleteAttr(row.id)">
              <template #reference>
                <el-button type="primary" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="scene == 1"></div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import useCategoryStore from '@/store/modules/category';
import { reqAttr, reqAddOrUpdateAttr, reqRemoveAttr } from '@/api/product/attr';
import type { Attr } from '@/api/product/attr/type';

const categoryStore = useCategoryStore();

//定义card组件内容切换变量
let scene = ref<number>(0); //scene=0,显示table,scene=1,展示添加与修改属性结构
//存储已有的属性与属性值
let attrArr = ref<Attr[]>([]);

const addAttr = () => {};
const updateAttr = () => {};
const deleteAttr = () => {};
</script>

<style lang="scss" scoped></style>
